<template>
  <div class="front confirm-pay">
    <div class="header-box">
      <Header></Header>
    </div>
    <div class="container docWidth">
      <div class="pay-warpper" v-if="!showResult">
        <div class="payAmount">
          订单提交成功，请尽快付款！订单编号：{{orderNb}}
          <div>应付金额：<span>{{amount}}</span>元</div>
        </div>
        <div class="type-warpper">
          <ul>
            <li v-for="(item,index) in typeList" :key="index" @click="active = item.active">
              <i :class="active === item.active ? 'active' : ''"></i>
              <img :src="item.icon" />{{item.name}}
            </li>
          </ul>
          <el-button :loading="loading" type="primary" class="payBt" @click="toPay">立即支付</el-button>
        </div>
      </div>
      <div class="result-warpper" v-else>
        <div class="pay-result">
          <div class="resultText"><img src="@/assets/front-img/gou.png" />购买成功！我们会尽快为您处理</div>
          <!-- <p>订单编号：{{orderNb}}</p> -->
          <!-- <p>支付{{amount}}元</p> -->
          <!-- <p>微信支付{{amount}}元</p> -->
          <div class="btns">
            <span @click="$router.push('/purchaseOrder/mall?status=2')">查看订单详情</span>
            <span @click="$router.push('/front-goodList?type=1')">继续逛逛</span>
          </div>
        </div>
        <div class="productList">
          <ul>
            <li v-for="(item,index) in newProduct" :key="index" @click="toProductDetail(item.gongyingId,item.id)">
              <img :src="item.image" alt class="img" />
              <p>{{item.name}}</p>
              <div class="price">{{item.priceText!=='面议'?'￥':''}}<span>{{item.priceText}}</span></div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Footer from "@/views/front/components/Footer";
import Header from "@/views/front/components/Header";
import { prepay } from "@/api/cart";
import { orderOfflinePay, orderDirectPay, xcxOrderOfflinePay } from '@/api/mall'
export default {
  components: {
    Footer,
    Header,
  },
  data() {
    return {
      showResult: false,
      typeList: [
        // { name: '支付宝', active: 8, icon: require('@/assets/front-img/pay_icon1.png') },
        // { name: '微信',active:7, icon: require('@/assets/front-img/pay_icon2.png') },
				{ name: '工商银行',active:9, icon: require('@/assets/front-img/pay_ICBC.jpg') },
      ],
      loading: false,
      active: 9,
      newProduct: [],
      amount: 0,
      orderNb: '',
      orderId: '',
      deposit: false,// 是否需要缴纳保证金
      orderWhere: ''
    };
  },
  created() {
    this.amount = this.$route.query.amount || 0;
    this.orderNb = this.$route.query.orderNb || '';
    this.orderId = this.$route.query.id || '';
    this.deposit = this.$route.query.deposit;
    this.orderWhere = this.$route.query.orderWhere;
    if (!this.$route.query.isPay) {
      this.showResult = true
    }
    console.log(this.$route.query.id);
  },
  mounted() {
    // this.importAlipayJs()
  },
  methods: {
    importAlipayJs() {
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = 'https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js';
      document.body.appendChild(s);
    },
    //创建订单
    toPay() {
      if (!this.$route.query.id) {
        this.$message.error('订单信息错误')
        return
      }

      this.loading = true
      //channel为99表示新开界面跳转支付
      let trxChannel = '01'
      if (this.$route.query.channel && this.$route.query.channel === '99') {
        trxChannel = '99'
      }
			const params = {
			  id: this.$route.query.id,
        trxChannel: trxChannel
			}

			if(this.active==9){
        if (this.deposit) { // 缴纳保证金
          orderDirectPay(params).then((res) => {
            this.$emit('getList')
            this.dialogFormVisible = false;
            this.loading = false;
            window.location.href = res;
          }).catch(err=>{
            this.loading = false;
          })
        } else {
          //orderwhere等于3就是经纪人商品
          if (this.orderWhere == 3) {
            var temp = {
              id: this.$route.query.id,
              trxChannel: '08',
              payType: 2
            }
            xcxOrderOfflinePay(temp).then(res => {
              this.$emit('getList')
              this.dialogFormVisible = false;
              this.loading = false;
              window.location.href = res;
            })
            .catch((err) => {
              this.loading = false;
            })
          } else {
            orderOfflinePay(params).then((res) => {
              this.$emit('getList')
              this.dialogFormVisible = false;
              this.loading = false;
              window.location.href = res;
            }).catch(err=>{
              this.loading = false;
            })
          }
        }
				return
			}
			// 支付宝支付  不用了
      // const returnUrl = window.location.href.split('&isPay')[0]
      // // console.log(returnUrl)
      // const params = {
      //   orderIds: this.$route.query.id,
      //   type: this.active,
      //   returnUrl: returnUrl
      // }
      // prepay(params).then((respanse) => {
      //   // confirm-pay
      //   this.loading = false
      //   // this.alipayPay(respanse)
      //   if (respanse) {
      //     // console.log(respanse)
      //     const html = respanse.indexOf('<script') ? respanse.substring(0, respanse.indexOf('<script')) : respanse
      //     console.log(html)
      //     this.$router.replace({ path: '/confirm-payHtml', query: { htmls: html } })
      //   }
      // }).catch(err => {
      //   this.loading = false
      // })
    },
    alipayPay(data) {
      if (data) {
        console.log(ap)
        ap.tradePay({
          orderStr: data
        }, function (res) {
          console.log(res)
          ap.alert(res.resultCode);
        });
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.confirm-pay {
  .container {
    padding: 25px 0;
    .pay-warpper {
      .payAmount {
        line-height: 1.3;
        font-size: 14px;
        color: #333;
        display: flex;
        justify-content: space-between;
        span {
          font-size: 24px;
          color: #ca1414;
        }
      }
      .type-warpper {
        margin-top: 10px;
        border: 1px solid #eee;
        li {
          border-bottom: 1px solid #eee;
          height: 70px;
          padding: 0 30px;
          display: flex;
          align-items: center;
          cursor: pointer;
          i {
            width: 20px;
            height: 20px;
            margin-right: 40px;
            box-sizing: border-box;
            border: 1px solid #eee;
            &.active {
              border: none;
              background: #5da223;
            }
          }
          img {
            width: 30px;
            margin-right: 20px;
          }
        }
        .payBt {
          width: 235px;
          padding: 20px 0;
          font-size: 18px;
          background: #965f29;
          border-radius: 2px;
          border: 0;
          margin: 30px 0 30px 90px;
        }
      }
    }
    .pay-result {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 80px 80px 80px 340px;
      border-radius: 5px;
      line-height: 1.5;
      .resultText {
        font-size: 24px;
        color: #5da223;
        font-weight: bold;
        position: relative;
        margin-bottom: 30px;
        img {
          width: 40px;
          position: absolute;
          left: -66px;
          top: 0;
        }
      }
      p {
        color: #333;
      }
      .btns {
        margin-top: 30px;
        span {
          color: #5da223;
          margin-right: 50px;
          cursor: pointer;
        }
      }
    }
    .productList {
      ul {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        li {
          margin: 16px 15px;
          width: calc(25% - 30px);
          cursor: pointer;
          > img {
            border: 1px solid #efefef;
            // background: #f6f6f6;
            width: 100%;
            height: 160px;
            object-fit: cover;
          }
          p {
            margin-top: 5px;
          }
          .price {
            margin-top: 5px;
            font-size: 14px;
            color: #a60304;
            span {
              font-size: 24px;
            }
          }
        }
      }
    }
  }
}
</style>
